<template>
  <div style="margin:60px">
    <s-button @click="x">show modal</s-button>
 <br>
 <br>
 <br>
 <br>
  <div>
    <s-icon name="loading" color="red" hoverColor="green"></s-icon>
    </div>
  </div>
</template>
<script>
import modal from './plugins/modal'
import toast from './plugins/toast'
import Vue from 'vue'
Vue.use(modal)
Vue.use(toast)

export default {
  data () {
    return {
    }
  },
  methods: {

    x () {
      let func1 = () => {
        this.$toast({
          message: '确认选择英雄',
          duration: 1500,      
          type: 'success' })
      }
      let func2 = () => {
        this.$toast({
          message: '溜了溜了',
          duration: 1500,
          type: 'info' })
      }
      let func3 = () => {
        this.$toast({
          message: '就这 ？ 就这 ？',
          duration: 2500,
          type: 'error' })
      }
      this.$modal({
        title: '上号',
        content: '我玩亚索！！！',
        btnConfig: {
          'confirmText': '确认',
          'confirmCallback': func1,
          'cancelText': '取消',
          'cancelCallback': func2,
          'cancelModalCallback': func3
        } })
    }
  }
}
</script>
<style lang="scss">
 @import './static/scss/global.scss';

</style>
